<!-- 发布房源 -->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/myself' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>发布房源</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!--步骤条切换-->
      <el-steps :active="active" finish-status="success">
        <el-step title="房源主体信息"></el-step>
        <el-step title="地图定位"></el-step>
        <el-step title="上传多张方位图"></el-step>
      </el-steps>
      <!--选项卡切换操作-->
      <el-tabs v-model="activeName">
        <!--填写房源主体信息表单主板块-->
        <el-tab-pane name="1">
          <!--房源主体信息添加和单张图片一起上传-->
          <el-form :model="houseForm" :rules="rules" ref="houseFormRef" label-width="100px" class="demo-houseForm">
            <el-row :gutter="20">
              <el-col :span="8" style="width:40%;padding-left:0 ;">
                <el-form-item label="标题" prop="housetitle">
                  <el-input v-model="houseForm.housetitle" placeholder="请输入标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="width:30%;padding-left:0 ;">
                <el-form-item label="面积" prop="areas">
                  <el-input v-model.number="houseForm.areas" placeholder="请输入面积"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="width:30%;padding-left:0 ;">
                <el-form-item label="单价" prop="houseprice">
                  <el-input v-model.number="houseForm.houseprice" placeholder="请输入价格(万元/㎡)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" style="width:33%;padding-left:0 ;">
                <el-form-item label="朝向" prop="face">
                  <!-- 朝向  1东南 2西南 3东北 4西北 -->
                  <el-select v-model="houseForm.face" placeholder="请选择朝向">
                    <el-option label="东南" value="1"></el-option>
                    <el-option label="西南" value="2"></el-option>
                    <el-option label="东北" value="3"></el-option>
                    <el-option label="西北" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="width:33%;padding-left:0 ;">
                <el-form-item label="楼层" prop="floor">
                  <!-- 楼层  1:6层以下 2:6-12层 3东北 4西北 -->
                  <el-select v-model="houseForm.floor" placeholder="请选择楼层">
                    <el-option label="6层以下" value="1"></el-option>
                    <el-option label="6-12层" value="2"></el-option>
                    <el-option label="12层以上" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="width:34%;padding-left:0 ;">
                <el-form-item label="几室几厅" prop="apartment">
                  <!-- 几室几厅  1三室 2四室 3五室 4五室以上 -->
                  <el-select v-model="houseForm.apartment" placeholder="请选择">
                    <el-option label="三室" value="1"></el-option>
                    <el-option label="四室" value="2"></el-option>
                    <el-option label="五室" value="3"></el-option>
                    <el-option label="五室以上" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" style="width:32%;padding-left:0 ;">
                <el-form-item label="小区名称" prop="areaname">
                  <el-input v-model="houseForm.areaname" placeholder="请输入小区名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="width:30%;padding-left:0 ;">
                <el-form-item label="电梯" prop="elevator">
                  <el-radio-group v-model="houseForm.elevator">
                    <el-radio label="有"></el-radio>
                    <el-radio label="无"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="width:38%;padding-left:0 ;">
                <el-form-item label="新旧" prop="htype">
                  <el-radio-group v-model="houseForm.htype">
                    <el-radio label="新房" value="1"></el-radio>
                    <el-radio label="二手房" value="2"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="14">
              <el-col :span="6" style="width:30%;padding-left:0 ;">
                <el-form-item label="房屋类型" prop="level">
                  <!-- 房屋类型   1经济型2中档型3高档型4豪华型-->
                  <el-select v-model="houseForm.level" placeholder="请选择">
                    <el-option label="经济型" value="1"></el-option>
                    <el-option label="中档型" value="2"></el-option>
                    <el-option label="高档型" value="3"></el-option>
                    <el-option label="豪华型" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="width:55%;padding-left:0 ;">
                <el-form-item label="描述" prop="houseinfo">
                  <el-input type="textarea" v-model="houseForm.houseinfo"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="17">
              <el-col :span="12" style="width:68%;padding-left:0 ;">
                <el-form-item label="上传主图">
                  <el-upload :auto-upload="false" :on-change="onchange" :on-remove="handleRemove" :limit="1" list-type="picture-card"
                    action="#">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <!--图片展示-->
                  <el-dialog>
                    <img width="100%" :src="src" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="nexts('houseFormRef')">下一步</el-button>
              <el-button @click="resetForm('houseFormRef')">重置</el-button>

            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!--地图定位的板块-->
        <el-tab-pane name="2">
          <!--地图定位组件-->
          <Maps @mapEvent="getAddress"></Maps>
        </el-tab-pane>

        <!--上传多张图片板块-->
        <el-tab-pane name="3">
          <!--多张图片上传组件-->
          <UploadImg @imgEvent="subAll"></UploadImg>
          <!--所有数据提交到后台-->

        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
  import Maps from './Maps.vue' //引入地图组件
  import UploadImg from './UploadImg.vue' //多图上传
  export default {
    components: {
      Maps,
      UploadImg
    },
    data() {
      return {
        // 下一步切换
        next: true, // 最后提交按钮的disabled编辑或禁用状态
        activeName: '1', // 标签页
        activeNames: ['1', '2', '3'],
        active: 0, // 步骤条

        //上传图片
        src: '', //图片预览地址
        fileLength: 0, //图片长度做为空验证

        //房源主体表单
        houseForm: {
          longitude: '', //经度
          latitude: '', //纬度
          housetitle: '',
          houseprice: '',
          areas: '',
          face: '',
          floor: '',
          apartment: '',
          elevator: '',
          areaname: '',
          htype: '',
          level: '',
          houseinfo: '',
          address: '',
          imgurl: '',
          addressinfo: '',
          huserid: ''

        },
        //验证表单规则
        rules: {
          //标题
          housetitle: [{
              required: true,
              message: '请输入标题',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20 个字符',
              trigger: 'blur'
            }
          ],
          //价格
          houseprice: [{
              required: true,
              message: '价格不能为空'
            },
            {
              type: 'number',
              message: '价格必须为数字值'
            }
          ],
          //面积
          areas: [{
              required: true,
              message: '面积不能为空'
            },
            {
              type: 'number',
              message: '面积必须为数字值'
            }
          ],
          //朝向
          face: [{
            required: true,
            message: '请选择朝向',
            trigger: 'change'
          }],
          //楼层
          floor: [{
            required: true,
            message: '请选择楼层',
            trigger: 'change'
          }],
          //几室几厅
          apartment: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          //小区名
          areaname: [{
              required: true,
              message: '请输入小区名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20 个字符',
              trigger: 'blur'
            }
          ],
          //电梯
          elevator: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          //新旧
          htype: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          //房屋类型
          level: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          //描述
          houseinfo: [{
            required: true,
            message: '请填写概况',
            trigger: 'blur'
          }]
        }
        //规则结束
      }
    },
    methods: {
      //3.获取多图路径 三个板块一起提交
      //点击提交按钮
      async subAll(datas) {
        //上一步 num=2 //提交num=1
        if (datas.num === 1) { //提交
          this.houseForm.huserid = JSON.parse(window.sessionStorage.getItem("user")).userid; //当前用户id

          var qs = require('qs');
          //对象和数组封装为一个对象
          var data = {
            house: this.houseForm,
            imgs: datas.upimgs
          };
          //转为json
          var jsonData = JSON.stringify(data);
          var formdata3 = new FormData();
          formdata3.append("jsonData", jsonData);
          const {
            data: res
          } = await this.$axios.post(
            "HouseController/addHouse.action",
            formdata3
          )
          //主体信息的对象
          console.log(res);
          if (!res) return this.$message.error('添加失败')
          //跳转到我的仓库
          window.sessionStorage.setItem("activePath", '/myHouseList');//高亮导航
          this.$router.push('/myHouseList')

        } else if (datas.num === 2) { //上一步
          this.activeName = this.activeNames[1]
        }
      },

      //2、获取地图组件传来的数据并判断上下步
      getAddress(datas) {
        this.houseForm.address = datas.address; //省市区
        this.houseForm.addressinfo = datas.addressinfo; //详细地址
        this.houseForm.longitude = datas.longitude; //经度
        this.houseForm.latitude = datas.latitude; //纬度
        console.log(this.houseForm);
        //上一步 num=2 //下一步num=1
        if (datas.num === 1) {
          this.activeName = this.activeNames[2]
        } else if (datas.num === 2) {
          this.activeName = this.activeNames[0]
        }
      },

      //1、主体信息面板
      // 上传图片的选择和删除及存储file
      // 阻止upload的自己上传，进行再操作
      async onchange(file, filesList, event) {
        this.fileLength += 1 // 表示有一张图片
        // 创建临时的路径来展示图片
        var windowURL = window.URL || window.webkitURL
        this.src = windowURL.createObjectURL(file.raw)
        //上传图片到后端
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        var formdata = new FormData();
        formdata.append("file", file.raw);
        formdata.append("imgPath", 'images/onehouse');
        const {
          data: res
        } = await this.$axios.post(
          'UploadController/addImg.action', formdata, config
        )
        //console.log(res);
        this.houseForm.imgurl = res; //赋值数据

      }, // 删除图片
      async handleRemove(file, filesList) {
        this.fileLength -= 1 // 表示删了一张图片
        //去后端把服务器的指定图片删了
        var formdata2 = new FormData();
        formdata2.append("imgPath", this.houseForm.imgurl);
        formdata2.append("filename", 'onehouse');
        const {
          data: res
        } = await this.$axios.post(
          'UploadController/removeImg.action', formdata2)
        //  console.log(res);
        //前端删除
        this.src = '';
        this.houseForm.imgurl = '';
      },
      //组图的下一步切换
      nexts(formName) {
        // 表单预校验
        this.$refs[formName].validate(async valid => {
          if (!valid && this.fileLength <= 0) return
          console.log(this.houseForm);

          // 下一步切换
          if (this.active++ > 2) this.active = 0
          this.activeName = this.activeNames[this.active]
        })

        // 下一步切换
        // if (this.active++ > 2) this.active = 0
        // this.activeName = this.activeNames[this.active]
      },
      //点击重置按钮
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
  /*添加菜谱的下一步按钮*/
  .menubtn {
    position: absolute;
    margin-left: 400px;
    margin-top: -45px;
  }
</style>
